<template>
  <el-dialog :visible.sync="dialog" width="1080px" :close-on-click-modal="false" :before-close="reset">
    <span slot="title" class="dialog-title">{{ disabled?'查看':title }}</span>
    <div class="dialog_info dataSourceDialog">
      <el-form ref="form" :disabled="disabled" :inline="true" :model="form" :rules="rules" label-width="200px">
        <el-form-item label="服务器名称：" prop="serviceName">
          <el-input v-model="form.serviceName" placeholder="服务器名称" clearable />
        </el-form-item>
        <el-form-item label="服务器ip：" prop="serviceHost">
          <el-input v-model="form.serviceHost" placeholder="服务器ip" clearable />
        </el-form-item>
        <el-form-item label="服务器agent端口：" prop="servicePort">
          <el-input v-model="form.servicePort" placeholder="服务器agent端口" clearable />
        </el-form-item>
        <el-form-item label="服务器是否保留备份">
          <el-radio-group v-model="form.serviceIsSave">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务器备份文件保留目录：" prop="serviceBackupSaveDir">
          <el-input v-model="form.serviceBackupSaveDir" placeholder="服务器备份文件保留目录" clearable />
        </el-form-item>
        <el-form-item label="中心否保留备份：">
          <el-radio-group v-model="form.centreIsSave">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="中心备份文件保留目录：" prop="centreBackupSaveDir">
          <el-input v-model="form.centreBackupSaveDir" placeholder="中心备份文件保留目录" clearable />
        </el-form-item>
        <el-form-item label="服务器类型：" prop="dataType">
          <el-select v-model="form.dataType" placeholder="服务器类型">
            <el-option label="window" :value="1" />
            <el-option label="linux" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="备份类型：" prop="backupType">
          <el-select v-model="form.backupType" placeholder="请选择" @change="change">
            <el-option label="MYSQL" :value="1" />
            <el-option label="目录下属文件" :value="2" />
            <el-option label="文件" :value="3" />
          </el-select>
        </el-form-item>
        <div v-if="form.backupType==2">
          <el-form-item label="备份的目录：">
            <div v-for="(item,index) in form.backupGetDirs" :key="index" class="item">
              <el-input v-model="item.label" placeholder="备份的目录" clearable />
              <i v-if="!disabled" style="font-size:24px;color:#409EFF;margin-left:8px" class="el-icon-circle-plus" @click="addItem(form.backupGetDirs)" />
              <i v-show="index!==0&&!disabled" style="font-size:24px;color:#F56C6C;margin-left:8px" class="el-icon-remove" @click="delItem(form.backupGetDirs,index)" />
            </div>
          </el-form-item>
        </div>
        <div v-if="form.backupType==3">
          <el-form-item label="备份的文件：">
            <div v-for="(item,index) in form.backupGetFiles" :key="index" class="item">
              <el-input v-model="item.label" placeholder="备份的文件" clearable />
              <i v-if="!disabled" style="font-size:24px;color:#409EFF;margin-left:8px" class="el-icon-circle-plus" @click="addItem(form.backupGetFiles)" />
              <i v-show="index!==0&&!disabled" style="font-size:24px;color:#F56C6C;margin-left:8px" class="el-icon-remove" @click="delItem(form.backupGetFiles,index)" />
            </div>
          </el-form-item>
        </div>
        <div v-if="form.backupType==1">
          <el-form-item label="数据库ip：" prop="dataHost">
            <el-input v-model="form.dataHost" placeholder="数据库ip" clearable />
          </el-form-item>
          <el-form-item label="数据库端口：" prop="dataPort">
            <el-input v-model="form.dataPort" placeholder="数据库端口" clearable />
          </el-form-item>
          <el-form-item label="数据库用户：" prop="dataUser">
            <el-input v-model="form.dataUser" placeholder="数据库用户" clearable />
          </el-form-item>
          <el-form-item label="数据库密码：" prop="dataPassword">
            <el-input v-model="form.dataPassword" placeholder="数据库密码" clearable />
          </el-form-item>
          <el-form-item label="数据库备份库：">
            <div v-for="(item,index) in form.dataBases" :key="index" class="item">
              <el-input v-model="item.label" placeholder="数据库备份库" clearable />
              <i v-if="!disabled" style="font-size:24px;color:#409EFF;margin-left:8px" class="el-icon-circle-plus" @click="addItem(form.dataBases)" />
              <i v-show="index!==0&&!disabled" style="font-size:24px;color:#F56C6C;margin-left:8px" class="el-icon-remove" @click="delItem(form.dataBases,index)" />
            </div>
          </el-form-item>
        </div>
        <el-form-item label="备注">
          <el-input v-model="form.remark" placeholder="描述" clearable />
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addConfig, updateConfig } from '@/api/dataSource'
export default {
  name: 'UserDialog',
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        status: 1,
        serviceName: '',
        serviceHost: '',
        servicePort: '',
        serviceIsSave: 1,
        serviceBackupSaveDir: '',
        centreIsSave: 1,
        centreBackupSaveDir: '',
        backupType: 1,
        dataType: 0,
        backupGetDirs: [{ label: '' }],
        backupGetFiles: [{ label: '' }],
        dataHost: '',
        dataPort: '',
        dataUser: '',
        dataPassword: '',
        dataBases: [{ label: '' }],
        remark: '',
        id: ''
      },
      title: '添加',
      rules: {
        serviceName: [{ required: true, message: '请输入服务器名称', trigger: 'blur' }],
        serviceHost: [{ required: true, message: '请输入服务器ip', trigger: 'blur' }],
        servicePort: [{ required: true, message: '请输入服务器agent端口', trigger: 'blur' }],
        serviceBackupSaveDir: [{ required: true, message: '请输入服务器备份文件保留目录', trigger: 'blur' }],
        centreBackupSaveDir: [{ required: true, message: '请输入中心备份文件保留目录', trigger: 'blur' }],
        backupType: [{ required: true, message: '请选择备份类型', trigger: 'change' }],
        dataType: [{ required: true, message: '请选择服务器类型', trigger: 'change' }],
        dataHost: [{ required: true, message: '请输入数据库ip', trigger: 'blur' }],
        dataPort: [{ required: true, message: '请输入数据库端口', trigger: 'blur' }],
        dataUser: [{ required: true, message: '请输入数据库用户', trigger: 'blur' }],
        dataPassword: [{ required: true, message: '请输入数据库密码', trigger: 'blur' }]
      }
    }
  },
  watch: {
    dialog(dialog) {
      if (dialog) {
        if (Object.keys(this.row).length === 0) {
          this.$data.form = this.$options.data().form
          this.title = '添加'
        } else {
          for (const key in this.form) {
            this.form[key] = this.row[key]
          }
          this.title = '修改'
          this.form.serviceIsSave = this.form.serviceIsSave * 1
          this.form.centreIsSave = this.form.centreIsSave * 1
          this.form.backupType = this.form.backupType * 1
          this.form.dataType = this.form.dataType * 1
          this.form.status = this.form.status * 1
          this.form.backupGetDirs = this.row.backupGetDirs?.split(',').map(res => ({ label: res }))
          this.form.dataBases = this.row.dataBases?.split(',').map(res => ({ label: res }))
          this.form.backupGetFiles = this.row.backupGetFiles?.split(',').map(res => ({ label: res }))
          console.log(this.form)
          if (!this.form.dataBases) {
            this.form.dataBases = [{ label: '' }]
          }
          if (!this.form.backupGetDirs) {
            this.form.backupGetDirs = [{ label: '' }]
          }
          if (!this.form.backupGetFiles) {
            this.form.backupGetFiles = [{ label: '' }]
          }
        }
        setTimeout(() => {
          this.$refs.form.clearValidate()
        }, 10)
      }
    }
  },
  methods: {
    reset() {
      this.$emit('reset', 'dialog')
    },
    change() {
      this.form.backupGetDirs = [{ label: '' }]
      this.form.backupGetFiles = [{ label: '' }]
      this.form.dataBases = [{ label: '' }]
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form))
          params.dataBases = params.dataBases.filter(item => (item.label !== '')).map(res => (res.label)).join(',')
          params.backupGetDirs = params.backupGetDirs.filter(item => (item.label !== '')).map(res => (res.label)).join(',')
          params.backupGetFiles = params.backupGetFiles.filter(item => (item.label !== '')).map(res => (res.label)).join(',')
          if (params.backupType * 1 === 1) {
            if (!params.dataBases) {
              this.$message.warning('请输入数据库备份库')
              return
            }
          }
          if (params.backupType * 1 === 2) {
            if (!params.backupGetDirs) {
              this.$message.warning('请输入备份的目录')
              return
            }
          }
          if (params.backupType * 1 === 3) {
            if (!params.backupGetFiles) {
              this.$message.warning('请输入备份的文件')
              return
            }
          }
          if (params.id) {
            updateConfig(params).then(res => {
              if (res.code * 1 === 200) {
                this.$message({
                  message: `${this.title}成功`,
                  type: 'success',
                  showClose: true
                })
                this.$emit('submit', 'dialog')
              }
            })
            return
          }
          addConfig(params).then(res => {
            if (res.code * 1 === 200) {
              this.$message({
                message: `${this.title}成功`,
                type: 'success',
                showClose: true
              })
              this.$emit('submit', 'dialog')
            }
          })
        } else {
          return false
        }
      })
    },
    addItem(row) {
      const a = [{ label: '' }]
      row.push.apply(row, a)
    },
    delItem(row, index) {
      row.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
.dialog_info {
  .el-input,
  .el-select {
    width: 220px;
  }
}
.item + .item {
  padding-top: 10px;
}
.item {
  i:hover {
    opacity: 0.8;
  }
}
</style>
<style lang="scss">
/**所有输入框，选择框的禁用样式*/
.dataSourceDialog {
  .el-textarea.is-disabled .el-textarea__inner,
  .el-input.is-disabled .el-input__inner,
  .el-select .el-input.is-disabled .el-input__inner,
  .el-range-editor.is-disabled,
  .el-range-editor.is-disabled input {
    background-color: rgba($color: #f2f2f2, $alpha: 0.4);
    border-color: #dcdfe6;
    color: #38393c;
    cursor: default;
    .el-input-group__append {
      display: none;
    }
  }
  /*单选框禁用样式选中*/
  .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    width: 10px;
    height: 10px;
    background-color: #409eff;
  }
}
</style>

